<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<base href="/springbootmarket-client/static/" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/layui.css" />
		<style>
			.form-group>label{
				font-size: 16px;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
	
		<div id="tableUser_container" >
			<!-- 添加用户的按钮 -->
			<button id="addUserBtn" class="layui-btn col-md-3 mt-2 ml-1" @click.prevent="addUserBtn">添加用户</button>
			<bootstrap-table ref="table" class="text-center" :columns="columns" :data="userData" :options="tableOptions"></bootstrap-table>
		

		
			<!-- 添加角色的div -->
			<div id="addUserDiv"  style="display: none;">
				<form id="addUserForm" class="ml-3 mt-3 mr-3">
				  <div class="form-group">
					<label>用户账号</label>
					<input type="text" v-model="user.u_id" class="form-control">
				  </div>
				  
				  <div class="form-group">
					<label>用户姓名</label>
					<textarea type="text" v-model="user.u_name" class="form-control"></textarea>
				  </div>
				 
				 
				  <div class="form-group" id="formCheck">
					<label>用户状态</label>
					<div class="custom-control custom-radio">
						<input type="radio" id="customRadio1" v-model="user.u_status" value="55" name="customRadio" class="custom-control-input">
						<label class="custom-control-label" for="customRadio1">启用</label>
					</div>
					<div class="custom-control custom-radio">
						<input type="radio" id="customRadio2" v-model="user.u_status" value="77" name="customRadio" class="custom-control-input">
						<label class="custom-control-label" for="customRadio2">禁用</label>
					</div>
				  </div>
				  
				  <div class="form-group">
				  					<label>角色名称</label>
				  					<textarea type="text" v-model="user.ro_name" class="form-control"></textarea>
				  </div>
				  <div class="form-group" id="formCheck">
				  					<label>角色状态</label>
				  					<div class="custom-control custom-radio">
				  						<input type="radio" id="customRadio1" v-model="user.ro_status" value="55" name="customRadio" class="custom-control-input">
				  						<label class="custom-control-label" for="customRadio1">启用</label>
				  					</div>
				  					<div class="custom-control custom-radio">
				  						<input type="radio" id="customRadio2" v-model="user.ro_status" value="77" name="customRadio" class="custom-control-input">
				  						<label class="custom-control-label" for="customRadio2">禁用</label>
				  					</div>
				  </div>
				  <button type="submit" class="btn btn-primary" @click.prevent="addUser">提交</button>
			    </form>
			</div>
			
			<!-- 编辑角色的div -->
			<div id="editUserDiv"  style="display: none;">
				<form id="editUserForm" class="ml-3 mt-3 mr-3">
				  <div class="form-group">
					<label>用户姓名</label>
					<input type="text" v-model="user.u_name" class="form-control">
				  </div>
				 
				  <div class="form-group" id="formCheck" style="">
					<label>用户状态</label>
					<div class="custom-control custom-radio">
						<input type="radio" id="customRadio1" v-model="user.u_status" value="55" name="customRadio" class="custom-control-input">
						<label class="custom-control-label" for="customRadio1">启用</label>
					</div>
					<div class="custom-control custom-radio">
						<input type="radio" id="customRadio2" v-model="user.u_status" value="77" name="customRadio" class="custom-control-input">
						<label class="custom-control-label" for="customRadio2">禁用</label>
					</div>
				  </div>
				  
				  <button type="submit" class="btn btn-primary" @click.prevent="editUser">提交</button>
			    </form>
			</div>
			
			<!-- 授权的div -->
			<div id="rightUserDiv" class="border mx-2 my-3" style="display: none;">
				{{uId}}
				{{moduleByIdList}}
				<div v-for="mainmenu in menuList">
					<div class="p-3 mb-2 bg-info text-white">
						<div class="py-1 mx-2">{{mainmenu.m_name}}</div>
					</div>
					<div class=" border-top py-3 mx-2"  style="display: flex;flex-wrap: wrap;">
						<div class="custom-control custom-switch pr-3 py-2" v-for="subMenu in mainmenu.subMenuViews">
						  <input type="checkbox" :value="subMenu.m_id" v-model="moduleByIdList" class="custom-control-input" :id="'customSwitch'+subMenu.m_id">
						  <label class="custom-control-label" :for="'customSwitch'+subMenu.m_id">{{subMenu.m_name}}</label>
						</div>
					</div>
				</div>
				
				<button class="layui-btn layui-btn-fluid" @click.prevent="rightUserById">确认修改</button>
			</div>
		</div>
		
		
		
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script type="text/javascript" src="js/popper.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-table-vue.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/sweetalert2.all.min.js"></script>
		<script type="text/javascript" src="layer-v3.1.1/layer/layer.js" ></script>
		<script type="text/javascript" src="js/my.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el:"#tableUser_container",
				components: {
					'BootstrapTable': BootstrapTable
				},
				data:function(){
					let self=this;
					return{
						columns: [
						{
						  title: '用户账号',
						  field: 'u_id'
						},
						{
						  title: '用户姓名',
						  field: 'u_name'
						}, 
						
						{
						  title: '用户状态',
						  formatter:function(value,row,index,filed){
							  if(row.u_status==55){
								  return "<button id='linkDisableUser' type='button' class='layui-btn layui-btn-normal'>已启用</button>";
							  }
							  else{
								  return "<button id='linkEnableUser' type='button' class='layui-btn layui-btn-danger'>已禁用</button>";
							  }
						  }
						},
		
						{
						  title: '操作',
						  //单元格式化函数
						  formatter:function(value,row,index,field){
							  let btn="" ;
							  if(row.u_status==55){
								  btn=btn+"<button id='linkDisableUser' type='button' class='layui-btn layui-btn-danger'>禁用</button>";
							  }
							  else if(row.u_status==77){
								  btn=btn+"<button id='linkEnableUser' type='button' class='layui-btn layui-btn-normal'>启用</button>";
							  }
							  btn=btn+"<button id='linkEditUser' type='button' class='layui-btn'>编辑</button>";
							  return btn;
						  },
						  events:{
							  'click #linkEnableUser':function(e, value, row, index){
								  self.enableUser(row.u_id);
								 
							  },
							  'click #linkDisableUser':function(e, value, row, index){
							  	 self.disableUser(row.u_id);
							  	 
							  },
							  'click #linkEditUser':function(e, value, row, index){
								  self.user.u_id=row.u_id;
								  self.user.u_name=row.u_name;
								  self.user.u_status=row.u_status;
							  	  self.editUserBtn();
							  },
			
						  }
						},
						{
						  title: '角色名称',
						  field: 'ro_name'
						}, 
						
						{
						  title: '角色状态',
						  formatter:function(value,row,index,filed){
							  if(row.ro_status==55){
								  return "<button id='linkDisableUser' type='button' class='layui-btn layui-btn-normal'>已启用</button>";
							  }
							  else{
								  return "<button id='linkEnableUser' type='button' class='layui-btn layui-btn-danger'>已禁用</button>";
							  }
						  }
						},
						
					],
					userData: [],
					//定义 角色数据 的属性
					user:{
						u_id:null,
						u_name:null,
						u_status:null,
						ro_name:null,
						ro_status:null
					},
					//每一行角色的id
					uId:null,
					//定义授权div中 存放所有主权限,子权限的数据属性
					menuList:{},
					//定义根据ro_id获取到的子权限编号
					moduleByIdList:[],
					//添加角色的 弹出层
					addLayerIndex:null,
					//编辑角色的弹出层
					editLayerIndex:null,
					//授权的弹出层
					rightLayerIndex:null,
					tableOptions: {
						search: true,
						showColumns: true,
						//显示分页信息
						pagination:true,
						sidePagination:'server',//使用server
						pageSize:10,
						pageList:[3,5,10,15	],
						queryParamsType: 'none',
						ajax:self.getUser,
						queryParams:function(params){
							return params;
						}
					  }
					}
				},//data结束
				methods:{
					getUser(params){
						this.$myGet('/safty/user/queryUser',{params:params.data})
						.then((result)=>{
							console.log(params);
							console.log(result);
							params.success(result);
						    // console.log(result);
						
						});
					},
					//添加角色按钮,弹出添加角色div框 addRoleDiv
					addUserBtn(){
						this.addLayerIndex = layer.open({
						    type: 1,
						    skin: 'layui-layer-rim', //加上边框
						    area: ['720px', '540px'], //宽高
						    title: ['添加角色','font-size:18px;color:#009688;font-weight: bold;text-align:center'],//想把这个字体变大
						    content: $("#addUserDiv")
						});
						
					},
					//添加角色方法,真正向后台提交数据的方法
					addUser(){
						this.$myPost('/safty/user/addUser/',this.user)
						.then((result)=>{
							//关闭添加角色的框
							layer.close(this.addLayerIndex);
							//清空表单中数据--两种方法
							//this.addRoleData={};
							$("#addUserForm")[0].reset();
							Swal.fire({
							    icon: 'success',
							    title: result.message,
							    showConfirmButton: false,
							    timer: 1500,
							})
							//刷新页面
							vue.$refs.table.refresh();
						})
					},
					//编辑角色的按钮,弹出编辑角色的div
					editUserBtn(){
						this.editLayerIndex = layer.open({
						    type: 1,
						    skin: 'layui-layer-rim', //加上边框
						    area: ['720px', '540px'], //宽高
						    title: ['编辑角色','font-size:18px;color:#009688;font-weight: bold;text-align:center'],//想把这个字体变大
						    content: $("#editUserDiv")
						});
					},
					//编辑角色提交按钮,向后台传递数据
					editUser(){
						this.$myPut('/safty/user/editUser/',this.user)
						.then((result)=>{
							//关闭添加角色的框
							layer.close(this.editLayerIndex);
							Swal.fire({
							    icon: 'success',
							    title: result.message,
							    showConfirmButton: false,
							    timer: 1500,
							})
							//刷新页面
							vue.$refs.table.refresh();
						})
					},
					//启用角色按钮
					enableUser(u_id){
						Swal.fire({
						    title: '确认启用角色吗',
						    icon: 'warning',
						    showCancelButton: true,
						    confirmButtonColor: '#3085d6',
						    cancelButtonColor: '#DC143C',
						    confirmButtonText: '确认'
						}).then((result) => {
						    if (result.value) {
								this.$myPut('/safty/user/enableUser/'+u_id)
								.then((result)=>{
									console.log(result);
									if(result.success){
										Swal.fire({
										    icon: 'success',
										    title: result.message,
										    showConfirmButton: false,
										    timer: 1500,
										})
										//刷新页面
										vue.$refs.table.refresh();
									}
									
								})
							}
						   })
					},
					//禁用角色按钮
					disableUser(u_id){
						 Swal.fire({
						    title: '确认禁用角色吗',
						    icon: 'warning',
						    showCancelButton: true,
						    confirmButtonColor: '#3085d6',
						    cancelButtonColor: '#DC143C',
						    confirmButtonText: '确认'
						}).then((result) => {
						    if (result.value) {
								this.$myPut('/safty/user/disableUser/'+u_id)
								.then((result)=>{
									if(result.success){
										Swal.fire({
										    icon: 'success',
										    title: result.message,
										    showConfirmButton: false,
										    timer: 1500,
										})
										//刷新页面
										vue.$refs.table.refresh();
									}
									
								})
							}
						   })
			        },
					
					queryAllUserById(u_id){
						this.$myGet('/safty/user/queryAllUserById/',{params:{u_id:u_id}})
						.then((result)=>{
							this.moduleByIdList=result;
							//console.log("roId:"+result);
						})
					},
				
				},
				mounted() {
					
				}
			})
		</script>
	</body>
</html>
